<template>
  <movie-header-backup></movie-header-backup>
  
  <!-- Cinema Detail Hero Section -->
  <section class="relative min-h-[30vh] flex items-center justify-center text-center px-4 overflow-hidden mt-16">
    <div class="absolute inset-0 bg-gray-900 opacity-90 z-0"></div>
    <div class="max-w-4xl mx-auto relative z-10" v-if="cinema">
      <h1 class="text-4xl md:text-6xl font-bold mb-4 text-white">
        <span class="gradient-text">{{ cinema.cinemaName }}</span>
      </h1>
      <p class="text-xl text-gray-200 mb-6">
        <i class="fas fa-map-marker-alt mr-2"></i> {{ cinema.location }}
      </p>
    </div>
  </section>
  
  <!-- Cinema Details Section -->
  <section class="py-12 bg-gray-900">
    <div class="max-w-7xl mx-auto px-4">
      <!-- Cinema Image -->
      <div class="mb-12" v-if="cinema">
        <div class="relative overflow-hidden rounded-xl shadow-2xl">
          <img 
            :src="getPictureUrl(cinema.cinemaId)" 
            alt="Cinema Image" 
            class="w-full h-[400px] object-cover"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
        </div>
      </div>
      
      <!-- Recent Movies Section -->
      <div class="mb-8">
        <h2 class="text-3xl font-bold mb-8 gradient-text inline-block">近期热映</h2>
        
        <!-- Movies Grid -->
        <div class="grid grid-cols-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
          <div 
            v-for="(movie, index) in movies" 
            :key="index" 
            @click="goToMovieDetail(movie.movieId)"
            class="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover-effect cursor-pointer"
          >
            <div class="relative overflow-hidden">
              <img 
                :src="getPosterUrl(movie.posterName)" 
                alt="Movie Poster" 
                class="w-full h-64 object-cover transition-transform duration-500 hover:scale-110"
              />
            </div>
            <div class="p-4">
              <h3 class="text-lg font-bold text-white mb-2 truncate">{{ movie.movieName }}</h3>
              <p class="text-gray-400 text-sm">
                <i class="far fa-calendar-alt mr-1"></i> {{ movie.showTime }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  
  <movie-footer></movie-footer>
</template>

<script>
import axios from 'axios'
import MovieFooter from './MovieFooter.vue'
import MovieHeaderBackup from './MovieHeaderBackup.vue'
import config from '@/config'

export default {
    components: {
        MovieHeaderBackup,
        MovieFooter
    },
    data(){
        return {
            cinema:null,
            movies:[],
            cinemaName:null,
            cinemaId:null
        };
    },
    created(){
      this.fetchCinema();
      this.fetchMoviesByCinema();
    },
    methods:{
      async fetchCinema() {
        this.cinemaId = this.$route.params.cinemaId;
        try {
          const response = await axios.post(`${config.url}getAllCinemas`);
          console.log(response.data.data);
          if (response.data.code === 200) {
            this.cinema = response.data.data.find(cinema => cinema.cinemaId.toString() === this.cinemaId);
            //注意这里的类型转换
            console.log(this.cinema)
            if (!this.cinema) {
              console.warn(`No cinema found with id: ${this.cinemaId}`);
            }
          } else {
            alert('Failed to fetch cinemas');
          }
        } catch (error) {
          console.error('Error fetching cinemas:', error);
        }
      },
      async fetchMoviesByCinema(){
        try{
          const response = await axios.post(`${config.url}cinema/getMoviesByCinema/${this.cinemaId}`);
          if (response.data.code === 200) {
            this.movies = response.data.data;
          }

        }catch(error){
          console.error('Error fetching movies by cinema:', error);
        }
      },
      getPictureUrl(cinemaId) {
        return require(`@/assets/img/cinema/cinema${cinemaId}.jpg`);
      },
      getPosterUrl(posterName) {
        return require(`@/assets/img/movie_posts/${posterName}`);
      },
      goToMovieDetail(movieId) {
        this.$router.push(`/movie/${movieId}`);
      }
    }
}
</script>

<style scoped>
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cursor-pointer {
  cursor: pointer;
}
</style>